<template>
	<view class="itemBox">
		<template v-if="!isOrder">
			<UserByList @userPage="$emit('userPage',item)" :item="item" :type="type"
				@communicates="$emit('communicates',item)"></UserByList>
		</template>
		<view class="toppingByList" v-if="item.is_topping == '2'">
			<u-icon name="arrow-upward"></u-icon>
		</view>

		<slot name="orderStatus"></slot>
		<slot name="list"></slot>

		<template v-if="type == 1">
			<view class="title" style="align-items: center;">
				<view style="margin-bottom: 24rpx;">
					{{ item[$t('item.company_name')] || $t("暂无信息") }}
				</view>

				<FromToCountry :item="item"></FromToCountry>
			</view>
			<view class="address">
				<div class="icon">
					<image :src='serverImageUrl("/static/newStyleIcon/line.png")' mode="widthFix" class="headline_img">
					</image>
				</div>
				<view>
					<view class="label">{{$t("公司所在地")}}</view>
					<view class="value">{{item.hyd || $t("暂无信息")}}</view>
				</view>
			</view>
			<view class="address">
				<div class="icon">
					<image :src='serverImageUrl("/static/newStyleIcon/address.png")' mode="widthFix"
						class="headline_img"></image>
				</div>
				<view>
					<view class="label">{{ $t('通关口岸') }}</view>
					<view class="value">{{item.shd || $t("暂无信息") }}</view>
				</view>
			</view>
			<!-- <view class="address" v-if="item.reachcitys&&item.reachcitys.mergename">
				<img :src="HTTP_IMG_UTL+'transportIcon1.png'" class="headline_img" />
				<view class="label">{{ $t('货物到达地') }}</view>
				<view v-if="lang=='zh'">{{item.reachcitys.mergename || $t("暂无信息") }}</view>
				<view v-if="lang!='zh'">{{item.reachcitys.mergename_ru || $t("暂无信息") }}</view>	
			</view> -->
			<view class="type">
				<TransportType :item="item"></TransportType>
			</view>
		</template>

		<template v-if="type == 2">

			<view class="title none-border-bottom" style="padding: 24rpx 0;">
				<view style="margin-bottom: 16rpx;">
					{{item[$t('item.goods_name')] || $t("暂无信息")}}
				</view>
				<view>
					<FromToCountry :item="item"></FromToCountry>
				</view>
			</view>

			<div class="product-pic">
				<image :src="HTTP_IMG_UTL+'huowuPic.png'" mode="aspectFill" style="width: 170rpx;height: 170rpx;"
					alt="" />
			</div>

			<view style="width: 100%;">
				<view>


					<view class="address">
						<div class="icon">
							<image :src='serverImageUrl("/static/newStyleIcon/line.png")' mode="widthFix"
								class="headline_img"></image>
						</div>
						<view>
							<view class="label">{{$t("出发城市")}}</view>
							<view class="warp value">
								{{item.hwcfd || $t("暂无信息")}}
							</view>
						</view>
					</view>
					<view class="address">
						<div class="icon">
							<image :src='serverImageUrl("/static/newStyleIcon/address.png")' mode="widthFix"
								class="headline_img"></image>
						</div>
						<view>
							<view class="label">{{$t("到达城市")}}</view>
							<view class="warp value">
								<view>{{item.hwddd || $t("暂无信息") }}</view>
							</view>
						</view>
					</view>
					<!-- <view class="address" v-if="item.reachcitys&&item.reachcitys.mergename">
						<img :src="HTTP_IMG_UTL+'transportIcon1.png'" class="headline_img" />
						<view v-if="lang=='zh'">{{item.reachcitys.mergename || $t("暂无信息") }}</view>
						<view v-if="lang!='zh'">{{item.reachcitys.mergename_ru || $t("暂无信息") }}</view>
					</view> -->
					<view class="u-margin-bottom-20">
						<TransportType :item="item"></TransportType>
					</view>
				</view>

				<view class="flex">
					<Tag :text="item.goods_weight+'kg'"
						:cusStyle="'color:#666;width:250rpx;padding:15rpx 0;margin-right:16rpx'" color="#f5f5f5">
					</Tag>
					<Tag :text="item.goods_volume+'m³'" :cusStyle="'color:#666;width:250rpx;padding:15rpx 0'"
						color="#f5f5f5">
					</Tag>
				</view>
			</view>

		</template>

		<slot name="flag"></slot>

		<view class="bidding_ares" v-if="type==2">
			<view class="bidding_time">
				<text style="line-height: 50rpx;color:#999">{{ time("S", item.createtime) }}</text>
			</view>
			<slot name="btns" v-if="isRow==0"></slot>
		</view>

		<view class="bidding_address">

			<view class="bidding_ares" v-if="type==1">
				<view class="bidding_time">
					<text style="line-height: 50rpx;color:#999">{{ time("S", item.createtime) }}</text>
				</view>
				<slot name="btns" v-if="isRow==0"></slot>
			</view>

			<view class="bidding_btn" @click.stop="$emit('communicate',item)" v-if="!isOrder&&type == 2">
				<text class="text_1">
					{{$t(jb) }}
				</text>
			</view>
			<view class="bidding_btn chat_btn" @click.stop="$emit('communicates',item)" v-if="!isOrder">
				<text class="text_1">
					{{ $t('即时沟通')  }}
				</text>
			</view>


		</view>
		<block v-if="(identity_type === 3 || identity_type === 0) && status == '0'">
			<view class="purchase_wrap">
				<view class="pur_left">
					<view class="item_top">
						<text class="name">{{$t('浏览')}}:</text>
						<text class="value">{{item.view_count || 0}}</text>
					</view>
					<view class="item_top item_bottom">
						<text class="name">{{$t('推送')}}:</text>
						<text class="value">{{item.push_count || 0}} {{$t('家货代公司')}}</text>
					</view>
				</view>
				<view class="pur_right">
					<view class="text">
						<text class="name">{{$t('竞标')}}:</text>
						<text class="value">{{item.jb_count || 0}}{{$t('家')}}</text>
					</view>
				</view>
			</view>
		</block>

		<slot name="btns" v-if="isRow==1"></slot>
		<slot name="bottom"></slot>

	</view>
</template>

<script>
	import UserByList from '@/components/UserByList.vue'
	import TransportType from '@/components/TransportType.vue'
	import FromToCountry from '@/components/FromToCountry.vue'
	import Tag from '@/components/Tag.vue'
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	export default {
		components: {
			TransportType,
			FromToCountry,
			Tag,
			UserByList
		},
		props: {
			item: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			isRow: {
				type: String | Number,
				default: '0',
			},
			isOrder: {
				type: [Boolean, Number],
				default: false,
			},
			orderDetail: {
				type: [Array, Object, String, null],
				default () {
					return {
						// 初始化对象的属性，确保是有效的默认值
					};
				}
			},
			identity_type: {
				type: String | Number,
				default: '',
			},
			status: {
				type: String | Number,
				default: 0,
			},
		},
		created() {

		},
		mounted() {

			if (uni.getStorageSync('off') == false) {
				this.jb = '参与订单'
			} else {
				this.jb = '参与竞标'
			}
		},
		data() {
			return {
				lang: getApp().globalData.lang,
				HTTP_IMG_UTL,
				jb: '参与订单'
			};
		},
		methods: {
			time(type = "MS", date1, str = "year") {
				if (type === "S") date1 = date1 * 1000 //秒
				let year = new Date(date1).getFullYear();
				let month = (new Date(date1).getMonth() + 1) > 9 ? (new Date(date1).getMonth() + 1) : '0' + (new Date(
						date1)
					.getMonth() + 1);
				let date = new Date(date1).getDate() > 9 ? new Date(date1).getDate() : '0' + new Date(date1).getDate();
				let hours = new Date(date1).getHours() > 9 ? new Date(date1).getHours() : '0' + new Date(date1).getHours();
				let minutes = new Date(date1).getMinutes() > 9 ? new Date(date1).getMinutes() : '0' + new Date(date1)
					.getMinutes();
				let seconds = new Date(date1).getSeconds() > 9 ? new Date(date1).getSeconds() : '0' + new Date(date1)
					.getSeconds();
				if (str === "year") {
					// return `${year}` + app.$i18n.t('年') + `${month}` + app.$i18n.t('月') + `${date}` + app.$i18n.t('日') + `${hours}:${minutes}:${seconds}`
					return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
				}
				if (str === "date") {
					return `${year + `-` + month + `-` + date}`
				}
				return `${year + str + month + str + date} ${hours}:${minutes}:${seconds}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wfull {
		width: 100% !important;
	}

	.bidding_btn {
		width: 307rpx;
		height: 67rpx;
		border-radius: 12.5rpx;
		background: linear-gradient(0deg, #000000, #000000), #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.chat_btn {
		width: 307rpx;
		height: 67rpx;
		border-radius: 12.5rpx;
		background: linear-gradient(102deg, #FF8C7B 15%, #FFD1A2 99%), #D8D8D8;
	}



	.text_1 {
		color: #fff;
	}

	.itemBox {
		background: #ddd;
		padding: 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;

		// 2024/11/15 新增
		.purchase_wrap {
			display: flex;
			width: 100%;
			margin-top: 24rpx;
			align-items: stretch;
			margin-bottom: 20rpx;

			.pur_left {
				flex: 1;
				margin-right: 15rpx;
				display: inline-flex;
				flex-direction: column;
				justify-content: space-between;

				.item_top {
					min-height: 40rpx;
					line-height: 40rpx;
					border-radius: 10rpx;
					text-align: center;
					color: #fff;
					background-image: linear-gradient(270deg, #CCE7F9 0%, #5282E6 33%, #CCE7F9 66%, #5282E6 100%);
					background-position: 100%;
					animation: btnone 4s linear infinite;
					background-size: 300% 100%;
					margin-bottom: 10rpx;

					&.item_bottom {
						margin-bottom: 0;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						animation: btnone 4.5s linear infinite;

						.value {
							line-height: 1.1;
						}
					}
				}

				.name {
					font-size: 16rpx;
					margin-right: 5rpx;
				}

				.value {
					font-size: 22rpx;
					font-weight: bold;
				}
			}

			.pur_right {
				flex: 1;
				min-height: 90rpx;
				border-radius: 12rpx;
				background: #F6F7FB;
				display: inline-flex;
				align-items: center;
				justify-content: center;

				.text {
					color: #3484C3;

					.name {
						font-size: 24rpx;
						margin-right: 5rpx;
					}

					.value {
						font-size: 30rpx;
					}
				}
			}

		}

		&.yellow {
			background: #fefcf6;
		}

		.productImg {
			display: flex;
			flex-direction: column;
			align-content: center;
			align-items: center;
			padding-right: 10rpx;

			img {
				width: 165rpx;
				height: 184rpx;
				margin-bottom: 5rpx;
			}
		}

		//地址信息
		.bidding_address {
			margin-top: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: $my-font-size21;
			font-weight: 400;
			color: #888888;
			line-height: 30rpx;
			align-items: center;
			margin-top: 24rpx;

			.bidding_ares {
				flex: 1;
				display: flex;
				//flex-direction: column;
				justify-content: flex-start;

				.bidding_ares1 {
					display: flex;
					justify-content: flex-start;

					image {
						width: 24.42rpx;
						height: 31.4rpx;
					}
				}
			}
		}

		.bidding_betwn {
			display: flex;
			// justify-content: space-between;

			.chat {
				transform: translateY(0rpx);
			}

			.userName {
				height: 50rpx;

				.bidding_user_text {
					display: block;
					padding-left: 0;
				}

				.country_icon {
					padding-left: 0;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}


			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: $my-padding-20;
				margin-right: 10rpx;


				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}
		}

		.title {
			border-top: 1rpx solid #f5f5f5;
			margin-top: 16rpx;
			color: #3d3d3d;
			font-size: 26rpx;
			font-weight: 600;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
			word-break: break-all;
			// padding-left: 28rpx;

			&.none-border-bottom {
				border-bottom: none;
			}
		}

		.type {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			// width: 90%;
			// margin: 0 auto;
		}

		.address {
			margin-bottom: 32rpx;
			font-size: 30rpx;
			position: relative;
			// font-weight: 600;
			display: flex;
			// .warp {
			// 	width: 55%;
			// }

			.headline_img {
				width: 55rpx;
				height: 55rpx;
			}

			.label {
				font-size: 22rpx;
				margin-bottom: 8rpx;
				color: #666;
			}

			.value {
				font-size: 24rpx;
				color: #3d3d3d;
			}
		}

		.bidding_time {
			width: 70%;
			font-size: 24rpx;
		}
	}

	page {
		background-color: #f6f6f6;
	}

	.btnStyle {
		background: #000000 !important;
		border-radius: 8rpx;
	}

	.icon {
		flex-shrink: 0;
		height: 70rpx;
		width: 70rpx;
		background-color: #F5F4F9;
		border-radius: 8rpx;
		margin-right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.product-pic {
		width: 300rpx;
		margin-bottom: 16rpx;
	}
</style>